import React, { useState } from 'react';
import { FlatList, TouchableOpacity, Text } from 'react-native';

const GenreFilter = ({ genres, onSelect }) => {
  const [selected, setSelected] = useState('');

  return (
    <FlatList
      data={genres}
      horizontal
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => {
            setSelected(item.id);
            onSelect(item.id);
          }}
          style={selected === item.id ? styles.selected : styles.button}
        >
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

export default GenreFilter;